<template>
  <q-page>
    <div class="popupBox" v-if="addTags || setTags" @click="closePopup()"></div>
    <div class="nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <el-image src="/svgs/titleIcon.svg" style="width: 17px;margin-top: 2px" fit />
        </el-breadcrumb-item>
        <el-breadcrumb-item>数据中心</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ name: 'dataAnnotations' }">数据标注</el-breadcrumb-item>
        <el-breadcrumb-item><span style="color: #333;">标注任务详情</span></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wrapBox" style="position: relative; user-select:none;" v-loading="loading">
      <div class="datasetBox" style="position: relative">
        <div class="contentBox">
          <div class="content_left">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
              style="border-bottom: 1px dashed #ccc;margin-bottom: 20px;position: relative;">
              <el-menu-item index="1">全部</el-menu-item>
              <el-menu-item index="2">有标注信息</el-menu-item>
              <el-menu-item index="3">无标注信息</el-menu-item>
              <el-button v-if="store.quickStart.quickFlow" style="position: absolute;right: 0;" type="primary" @click="nextFlow()">下一步</el-button>
            </el-menu>
            <div class="row">
              <div class="col " style="text-align: right; height: 30px;line-height: 30px;">
                <div style="margin-top: -10px;position: relative;display: flex; justify-content: flex-end;">
                  <div style="display: flex;justify-content: space-between;width: 100%">
                    <div>
                      <div>
                        <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
                          style="margin: 0 20px;height: 28px;">全选本页</el-checkbox>
                      </div>
                      <Transition name="el-fade-in-linear">
                        <div class="textColor" v-if="checkedCities.length > 0">已选中{{ checkedCities.length }}个信息</div>
                      </Transition>
                    </div>
                    <div style="display: flex;flex-direction: row">
                      <el-button :disabled="!checkedCities.length > 0"
                        @click="checkedCities.length > 0 ? deleteLabelData() : ''" type="primary">清空标注信息</el-button>
                      <el-button :disabled="!checkedCities.length > 0"
                        @click="checkedCities.length > 0 ? deleteData() : ''" type="primary">删除</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 图像分类 -->
            <template v-if="dataSetStore().labelUseData.data_type == 'Image'">
              <div class="dataBox">
                <el-row :gutter="20">
                  <el-col :span="6" v-for="(item, index) in dataList.results" :key="index" style="margin-bottom: 20px;">
                    <el-card class="labelDataBox" shadow="never" style="position: relative;" @click="poupBox(item)">
                      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"
                        style="margin: -2px 2px 0 0; display: inline-block;position: absolute;top:5px;right: 5px;"
                        @click.stop>
                        <el-checkbox :label="item.id"><br>
                        </el-checkbox>
                      </el-checkbox-group>
                      <el-image :src="item.annotation_data.data.url" style="object-fit: contain;" />
                      <div style="width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                        {{ item.file_upload_id }}</div>
                      <div v-if="item.tagCounts && currentModelScene !== 'image_classification'"
                        class="lsf-labels lsf-labels_inline">
                        <span v-for="(keys, val) in item.tagCounts" :key="keys"
                          class="lsf-label lsf-label_clickable lsf-label_margins"
                          style="--color: #409EFF; --background: #409eff26;">
                          <span class="lsf-label__text">{{ val }}</span>
                          <!--                          <span class="lsf-label__hotkey">{{ keys }}</span>-->
                        </span>
                      </div>
                      <!--图像分类-->
                      <div
                        v-else-if="currentModelScene === 'image_classification' && item.annotation_data.annotations.length !== 0"
                        class="lsf-labels lsf-labels_inline">
                        <span class="lsf-label lsf-label_clickable lsf-label_margins"
                          style="--color: #409EFF; --background: #409eff26;">
                          <span class="lsf-label__text">{{ item.annotation_data.annotations[0].result[0].value.choices[0]
                          }}</span>
                          <!--                          <span class="lsf-label__hotkey">{{ keys }}</span>-->
                        </span>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </template>
            <!-- 实时数据和文本分类 -->
            <template v-else>
              <div class="dataBox" style="margin: 20px 0">
                <el-row :gutter="20">
                  <div class="row listDataBox" style="width:100%;text-align: center;min-width: 500px;">
                    <el-table :data="dataList.results" border stripe style="width: 100%;">
                      <el-table-column prop="url" label="文件名称">
                        <template #default="scope">
                          <div class="col fileName"
                            :title="nameStr(scope.row.annotation_data.data.url ? scope.row.annotation_data.data.url : scope.row.annotation_data.data.text)">
                            {{
                              nameStr(scope.row.annotation_data.data.url ? scope.row.annotation_data.data.url :
                                scope.row.annotation_data.data.text)
                            }} </div>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" style="position: relative;" width="200">
                        <template #default="scope">
                          <el-button type="primary" link size="small" style="margin-bottom: 8px;margin-right: 30px;"
                            @click="poupBox(dataList.results[scope.$index])">标注</el-button>
                          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"
                            style="margin: -2px 2px 0 0; display: inline-block;" @click.stop>
                            <el-checkbox :label="cities[scope.$index]"><i
                                style="display: inline-block; transform: scale(.85);transform-origin:left bottom;font-style: initial;">选择</i></el-checkbox>
                          </el-checkbox-group>
                        </template>
                      </el-table-column>
                      <template #empty>
                        <div class="noData">暂无数据</div>
                      </template>
                    </el-table>
                  </div>
                </el-row>
              </div>
            </template>
            <div class="row" style="justify-content:flex-end;" v-if="dataList.results.length > 0">
              <el-pagination background layout="prev, pager, next, sizes, jumper" :total=dataList.count
                style="margin-bottom: 20px ;" :page-sizes="[10, 20, 50]" :current-page="pageData.page"
                @current-change="changePage" @size-change="sizeChange" />
            </div>
          </div>
          <div class="content_right">
            <q-breadcrumbs class="q-mb-md" style="height:48px;line-height: 35px; border-bottom: 1px dashed #ccc;">
              <q-breadcrumbs-el label="数据详情" class="textColor" style="color: #333;font-size: 16px;font-weight: 500" />
            </q-breadcrumbs>
            <!--          <div style="position: relative;">-->
            <!--            <el-button v-if="!addTagsShow" type="primary" plain size="small" @click="addTagsShow = !addTagsShow"-->
            <!--              style="margin-bottom: 10px;">添加标签</el-button>-->
            <!--&lt;!&ndash;            <transition name="el-fade-in-linear">&ndash;&gt;-->
            <!--&lt;!&ndash;              <div v-if="addTagsShow" class="addTagWrap" style="margin-bottom: 10px">&ndash;&gt;-->
            <!--&lt;!&ndash;                <el-input class="inputDeep" v-model.trim="addLabel.value" type="input" style="width: 150px; margin-right: 10px;" />&ndash;&gt;-->
            <!--&lt;!&ndash;                <span style="margin-left: 14px;position: relative;top: 2px;font-size: 12px;color: #629eff" @click="addTabs()">确定</span>&ndash;&gt;-->
            <!--&lt;!&ndash;                <span style="margin-left: 7px;position: relative;top: 2px;font-size: 12px" @click="handleAddTabs()">取消</span>&ndash;&gt;-->
            <!--&lt;!&ndash;              </div>&ndash;&gt;-->
            <!--&lt;!&ndash;            </transition>&ndash;&gt;-->
            <!--            <transition name="el-fade-in-linear">-->
            <!--              <div class="addTagsBox" v-if="addTags">-->
            <!--                <el-input v-model.trim="addLabel.value" type="input" placeholder="请输入标签名"-->
            <!--                          style="width: 150px; margin-right: 10px;" />-->
            <!--                <el-color-picker v-model="addLabel.background" style="vertical-align: middle;" />-->
            <!--                <el-button type="primary" size="small" style="margin-left: 7px;" @click="addTabs()">添加</el-button>-->
            <!--              </div>-->
            <!--            </transition>-->
            <!--          </div>-->
            <div style="position: relative;">
              <el-button plain size="small" @click="addTags = !addTags"
                style="background: #f5f5f5;padding: 5px 15px;margin-bottom: 10px;border: 1px solid #d9d9d9;">+
                添加标签</el-button>
              <transition name="el-fade-in-linear">
                <div class="addTagsBox" v-if="addTags">
                  <el-input v-model.trim="addLabel.value" type="input" placeholder="请输入标签名"
                    style="width: 150px; margin-right: 10px;" />
                  <el-color-picker v-model="addLabel.background" style="vertical-align: middle;" />
                  <el-button type="primary" size="small" style="margin-left: 7px;" @click="addTabs()">添加</el-button>
                </div>
              </transition>
            </div>
            <el-input v-model.trim="searchName" class="typeValueInput" placeholder="搜索标签名称" :suffix-icon="Search"
              style="width: 250px" spellcheck="false" />
            <div class="tagsBox" v-if="filterTableData.length > 0">
              <div class="row textColor" style="margin: 10px 0;font-size: 12px;padding: 10px;background: #f9f9f9;">
                <div class="col">标签名</div>
                <div class="col" style="text-align: right;">
                  数据量
                  <el-image :src="sortImg" style="width: 13px;height: 10px" @click="sortDataList"></el-image>
                </div>
              </div>
              <div class="textColor" style="position: relative;margin-bottom: 20px;"
                v-for="(item, index) in filterTableData" :key="index">
                <div class="row" style="border: 1px solid #dcdfe6;padding: 5px 10px;border-radius: 4px;">
                  <div class="col labelName" :title="item.value">{{ item.value }}</div>
                  <div class="col" style="text-align: right;">
                    {{ item.count ? item.count : 0 }}
                  </div>
                </div>
                <div class="outSetBox" @mouseenter.prevent="showBox(index)" @mouseleave.prevent="hideBox">
                  <transition name="el-fade-in-linear">
                    <div class="setBox" v-if="showTagId == index && boxState">
                      <el-icon v-if="item.count === 0" @click="setTagName(item.value, item.background, index)">
                        <EditPen />
                      </el-icon>
                      <el-icon @click="deleteTag(item.value)">
                        <Delete />
                      </el-icon>
                    </div>
                  </transition>
                </div>
                <transition name="el-fade-in-linear">
                  <div class="addTagsBox" v-if="setTags && setPopupIndex == index">
                    <el-input v-model.trim="addLabel.value" type="input" :placeholder="item.value"
                      style="width: 150px; margin-right: 10px;margin-bottom: 0px;" />
                    <el-color-picker v-model="addLabel.background" />
                    <el-button type="primary" size="small" style="margin-left: 7px;"
                      @click="setTabs(item.value)">修改</el-button>
                  </div>
                </transition>
              </div>
            </div>
            <div v-else style="width: 250px;text-align: center;padding: 10px 0;">暂无数据</div>
          </div>
        </div>
      </div>
      <el-dialog v-model="dialogFormVisible" title="标注信息" :close-on-click-modal="false" :show-close="false">
        <el-button style="position: absolute;right: 45px;top: 12px" type="text" icon="el-icon-close"
          class="custom-close-button" @click="closeDialog">X</el-button>
        <label-data-module @emitsFun="emitsFun" :labelObj="labelObj" v-if="dialogFormVisible"
          @emitNextPage="emitNextPageHandle" @emitPreviousPage="emitPreviousPageHandle"></label-data-module>
      </el-dialog>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { ref, shallowRef, computed, watch, nextTick } from "vue";
import { useRouter } from 'vue-router';
import { Search } from '@element-plus/icons-vue';
import { getDatasetDataList, setLabelData, setAllData, getDataList, getTextContent, getTextContentInfo, searchDataLabel } from 'src/api/dataset'
import { dataSetStore } from 'src/stores/dataSet';
import labelDataModule from 'src/components/labelDataModule.vue';
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus'
import sortImg from 'assets/dataSet/sort.png'
import { putQuickStartFlow } from 'src/api/project'
const store = dataSetStore()
const router = useRouter()
const projectId = router.currentRoute.value.params.project_id
const activeIndex = ref('1')
const searchName = ref('')
const loading = ref(true)
const boxState = ref(false)
const checkAll = ref(false)
const checkedCities = ref(<any>[])
const cities = ref(<any>[])
const labelObj = shallowRef()
const dialogFormVisible = ref(false)
const dataList = shallowRef({
  count: 0,
  results: <any>[]
});
const nextPageDataList = shallowRef({
  count: 0,
  results: <any>[]
});
const addIndex = ref(1);
const preIndex = ref(1);
const isNextPage = ref(true);
const addTags = ref(false)
let addTagsShow = ref(false)
const setTags = ref(false)
let isImg = ref(false);//是否是图片
const setPopupIndex = ref(0)
const addLabel = ref({
  value: '',
  background: '#629EFF'
})
const pageData = ref({
  page: 1,
  page_size: 10
});
const nextPageData = ref({
  page: 1,
  page_size: 10
})
const getDataType = ref('all')
let labelScene = ref('');//当前进入页面的标注场景
let currentModelScene = ref('');//存储当前的场景信息
let isUpdateAnnotationInformation = ref(0);//点击下一页是否更新标注
// 添加标签操作
function addTabs() {
  if (addLabel.value.value.length == 0) {
    ElMessage.error('请输入标签名称')
  } else {
    let isExist = dataSetStore().labelsArr.some((itme: any, index: any) => {
      return itme.value == addLabel.value.value
    })
    if (isExist) {
      ElMessage.error('该标签名称已存在')
      return
    } else {
      addTags.value = false
      setTagsApi(addLabel.value.value, 'add')
    }
  }
}
//取消添加
function handleAddTabs() {
  addLabel.value.value = '';
  addTagsShow.value = false;
}
let sort = ref(1);
// 搜索标签集合
let filterTableData = computed(() => {
  const arr = dataSetStore().labelsArr.filter((data: any) => data.value.toLowerCase().includes(searchName.value.toLowerCase()));
  if (sort.value) {
    arr.sort((item1: any, item2: any) => sort.value == 1 ? item2.count - item1.count : item1.count - item2.count)
  }
  return arr
})
//排序功能
function sortDataList() {
  if (sort.value == 1) {
    sort.value = 2
  } else {
    sort.value = 1
  }
}
function closePopup() {
  addTags.value = false
  setTags.value = false
}
function poupBox(res: any) {
  dialogFormVisible.value = true;
  labelObj.value = res;
}
const showTagId = ref()
function showBox(num: number) {
  boxState.value = true
  showTagId.value = num
}
function hideBox() {
  boxState.value = false
}
// 打开修改标签名称
function setTagName(value: string, background: string, index: number) {
  setPopupIndex.value = index
  addLabel.value.value = value
  addLabel.value.background = background
  setTags.value = true
}
// 修改标签
function setTabs(value: string) {
  setTagsApi(value, 'set')
}
// 删除标签
function deleteTag(tagName: string) {
  ElMessageBox.confirm('确定删除该标签吗？', '删除标签', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    setTagsApi(tagName, 'delete')
  })
}
// 标签操作的封装
function setTagsApi(value: string, type: string) {
  let labelsArr = [...dataSetStore().labelsArr];
  let storeIndex = labelsArr.findIndex((item: any) => {
    return item.value == value
  })
  let tipsText = ''
  if (type == 'delete') {
    labelsArr.splice(storeIndex, 1)
    tipsText = '删除'
  }
  if (type == 'set') {
    labelsArr.splice(storeIndex, 1, addLabel.value)
    setTags.value = false
    tipsText = '修改'
  }
  if (type == 'add') {
    labelsArr.push(addLabel.value)
    tipsText = '添加'
  }
  loading.value = true;
  let params: any = {};
  let arrayList: any = ['image_classification', 'taxonomy', 'text_classification'];
  if (arrayList.includes(labelScene.value)) {
    params.choices = clean(labelsArr)
  } else {
    params.labels = clean(labelsArr)
  }
  setLabelData(projectId, dataSetStore().labelUseData.id, params).then((res: any) => {
    ElNotification({
      title: 'Success',
      message: `${tipsText}成功`,
      type: 'success',
    })
    if (arrayList.includes(res.data.label_scene)) {
      dataSetStore().setLabelsArr(res.data.choices)
    } else {
      dataSetStore().setLabelsArr(res.data.labels)
    }
    dataSetStore().setUseData(res.data.id, res.data.annotation_config, res.data.label_type, res.data.title)
    addTagsShow.value = false;
  }).catch(error => {
    labelsArr = [...dataSetStore().labelsArr]
  }).finally(() => {
    addLabel.value = { value: '', background: '#629EFF' }
    loading.value = false
  })
}
function clean(ArrayList: { [x: string]: any; }) {
  ArrayList.forEach((item: any) => {
    for (let propName in item) {
      if (item[propName] === null || item[propName] === undefined || item[propName] === '') {
        delete item[propName];
      }
    }
    return item
  })
  return ArrayList
}
function deleteData() {
  let deleteObj = {
    action: 'delete_data',
    data_ids: checkedCities.value
  }
  ElMessageBox.confirm('确定删除选中的数据吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    loading.value = true
    setAllData(projectId, dataSetStore().labelUseData.id, deleteObj).then((res: any) => {
      ElMessage.success('删除成功！');
      checkedCities.value = [];
      dataLists();
    }).catch(error => {
      console.log(error)
    })
  })
}
function deleteLabelData() {
  let deleteObj = {
    action: 'delete_annotations',
    data_ids: checkedCities.value
  };
  ElMessageBox.confirm('确定清空选中数据的标注信息吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    loading.value = true
    setAllData(projectId, dataSetStore().labelUseData.id, deleteObj).then(() => {
      ElNotification({
        title: 'Success',
        message: '操作成功',
        type: 'success',
      })
      checkedCities.value = []
      getData()
    }).catch(error => {
      console.log(error)
    })
  })
}
const handleSelect = (key: string) => {
  if (key == '1') getDataType.value = 'all'; dataSetStore().setDataSetType('all');
  if (key == '2') getDataType.value = 'true'; dataSetStore().setDataSetType('true');
  if (key == '3') getDataType.value = 'false'; dataSetStore().setDataSetType('false');
  pageData.value.page = 1
  dataLists()
}
interface obj {
  [idx: string]: any
}
getData()
function getData() {
  loading.value = true;
  let obj: obj = {
    label_task: dataSetStore().labelUseData.id
  }
  if (getDataType.value != 'all') obj.is_labeled = getDataType.value
  obj = Object.assign(obj, pageData.value)
  getDatasetDataList(projectId, dataSetStore().task_id, obj).then((res: any) => {
    currentModelScene.value = res.data.label_scene;
    isImg.value = res.data.label_scene.includes('image');
    let dataLists = filterDataList(res.data.datas, getDataType.value);
    labelScene.value = res.data.label_scene;
    dataSetStore().setUseData(res.data.id, res.data.annotation_config, res.data.label_type, res.data.title)
    let newArr = dataLists.map((item: any) => {
      return item.id
    })
    cities.value = newArr;
  }).finally(() => {
    loading.value = false;
    dataLists();
  }).catch(error => {
    console.log(error);
    loading.value = false
  })
}
function dataLists() {
  let obj: obj = {}
  if (getDataType.value != 'all') obj.is_label = getDataType.value
  obj = Object.assign(obj, pageData.value)
  getDataList(projectId, dataSetStore().task_id, obj).then(async (res: any) => {
    if (currentModelScene.value === 'image_segmentation_with_polygons' || currentModelScene.value === 'image_detection') {
      let params: any = currentModelScene.value === 'image_segmentation_with_polygons' ? 'polygonlabels' : 'rectanglelabels';
      modifyData(params);
      function modifyData(params: any) {
        let dataListArray: any = res.data.results.map((item: any) => {
          if (item.annotation_data.annotations.length !== 0) {
            const tagCounts = item.annotation_data.annotations[0].result.reduce((result: { [x: string]: number; }, item: { value: { [x: string]: any[]; }; }) => {
              item.value[params].forEach((tag: any) => {
                if (result[tag]) {
                  result[tag] += 1;
                } else {
                  result[tag] = 1;
                }
              });
              return result;
            }, {});
            item.tagCounts = tagCounts;
          }
          return item;
        })
        dataList.value = { ...res.data, results: dataListArray };
      }
    } else {
      dataList.value = res.data;
    }

    if (res.data.next === null) {
      isNextPage.value = false;
    } else {
      isNextPage.value = true;
    }
    nextPageDataList.value.results = [];
    nextPageDataList.value.count = 0;
    loading.value = false;
  })
}

function filterDataList(arr: any, getDataType: any) {
  switch (getDataType) {
    case 'all':
      return arr;
    case 'true':
      return arr.filter((item: any) => item.annotation_data.is_labeled)
    case 'false':
      return arr.filter((item: any) => !item.annotation_data.is_labeled)
  }
}

const handleCheckAllChange = (val: boolean) => {
  checkedCities.value = val ? cities.value : []
}

const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.value.length
}

function emitsFun(bol: boolean) {
  dialogFormVisible.value = false;
  dataLists();
}

function cloneArray(arr: any) {
  return JSON.parse(JSON.stringify(arr));
}

//处理标记的数据

//下一页
async function emitNextPageHandle(id: any) {
  isUpdateAnnotationInformation.value = -1;
  let dataListData: any = [];
  //判断当前是在那个数组里面
  let useArrayList: number = cloneArray(dataList.value).results.findIndex((element: any) => element.id === id);
  if (useArrayList !== -1) {
    dataListData = cloneArray(dataList.value).results;
    nextPageData.value.page = pageData.value.page;
  } else {
    dataListData = cloneArray(nextPageDataList.value).results
  }
  let findIndex: number = dataListData.findIndex((element: any) => element.id === id);
  let nextIndex: number; //翻页的时候展示第一条不能加1 preIndex
  if (addIndex.value === 1) {
    nextIndex = findIndex + 1;
  } else {
    nextIndex = findIndex;
    addIndex.value = 1;
  }
  if (nextIndex <= dataListData.length - 1) {
    let currentPageData: any = dataListData[nextIndex];
    labelObj.value = currentPageData;
    dialogFormVisible.value = false;
    await nextTick();
    dialogFormVisible.value = true;
  } else {
    if (!isNextPage.value) {
      ElMessage.warning('当前是最后一张！');
      return;
    }
    try {
      nextPageData.value.page += 1;
      let obj: any = { is_label: getDataType.value };
      obj = Object.assign(obj, nextPageData.value);
      const res: any = await getDataList(
        projectId,
        dataSetStore().task_id,
        obj
      )
      if (res.data.results === 0) {
        ElMessage.success('到底了！');
        return;
      }
      if (res.data.next === null) {
        isNextPage.value = false;
      }
      nextPageDataList.value = res.data;
      addIndex.value = 0;
      emitNextPageHandle(res.data.results[0].id);
    } catch (error: any) {
      console.error("Error:", error);
    }
  }
}

//上一页
async function emitPreviousPageHandle(id: any) {
  let dataListData: any = [];
  let useArrayList: number = cloneArray(dataList.value).results.findIndex((element: any) => element.id === id);
  if (useArrayList !== -1) {
    dataListData = cloneArray(dataList.value).results;
    nextPageData.value.page = pageData.value.page;
  } else {
    dataListData = cloneArray(nextPageDataList.value).results
  }
  let findIndex: number = dataListData.findIndex((element: any) => element.id === id);
  let nextIndex: number;
  if (preIndex.value === 1) {
    nextIndex = findIndex - 1;
  } else {
    nextIndex = findIndex;
    preIndex.value = 1;
  }
  if (nextIndex >= 0) {
    let currentPageData: any = dataListData[nextIndex];
    labelObj.value = currentPageData;
    dialogFormVisible.value = false;
    await nextTick();
    dialogFormVisible.value = true;
  } else {
    if (pageData.value.page === 1 && nextPageData.value.page === 1) {
      ElMessage.warning('当前是第一张！');
      return;
    } else {
      nextPageData.value.page -= 1;
      let obj: any = { is_label: getDataType.value };
      obj = Object.assign(obj, nextPageData.value);
      try {
        const res: any = await getDataList(
          projectId,
          dataSetStore().task_id,
          obj
        );
        if (res.data.next !== null) {
          isNextPage.value = true;
        }
        nextPageDataList.value = res.data;
        preIndex.value = 0;
        emitPreviousPageHandle(res.data.results[res.data.results.length - 1].id);
      } catch (error: any) {
        console.error("Error:", error);
      }
    }
  }
}


function closeDialog() {
  dialogFormVisible.value = false;
  dataLists();
}

const nameStr = (str: string) => {
  let name = str.substring(str.lastIndexOf("/") + 1)
  return name
}

function changePage(currentPage: any) {
  pageData.value.page = currentPage
  nextPageData.value.page = currentPage;
  dataLists()
}
function sizeChange(pageSize: any) {
  pageData.value.page_size = pageSize
  pageData.value.page = 1;
  nextPageData.value.page_size = pageSize;
  nextPageData.value.page = 1;
  dataLists()
}
// 快速入门下一步
function nextFlow() {

  searchDataLabel(projectId, { title: store.labelUseData.title }).then((el: any) => {
    let labelState = el.data.results[0].data_statistic
    if (labelState.total_number == labelState.labeled_number) {
      putQuickStartFlow(projectId, { stage: 3 }).finally(() => {
        router.push({ name: 'quick-start', params: { project_id: projectId } })
      })
    } else {
      ElMessage.warning('有未标注数据，请先将全部数据标注完成')
    }
  })
}

</script>

<style scoped lang="scss">
.nav {
  display: flex;
  align-items: center;
  padding-left: 20px;
  cursor: pointer;
  background-color: #f6f8fa;
  height: 46px;

  ::v-deep .el-breadcrumb {
    display: flex;
    align-items: center;
  }
}

.wrapBox {
  padding: 0 !important;

  .datasetBox {
    .title {
      width: 100%;
      padding: 12px;
      box-sizing: border-box;
      background-color: #fff;
      color: #333;
      font-weight: 500;
      text-align: left;
      line-height: 24px;
      border-bottom: 2px solid #f6f8fa;
    }

    .contentBox {
      display: flex;
      flex-direction: row;
      background-color: #f6f8fa;

      .content_left {
        width: 100%;
        padding: 10px 20px 10px 20px;
        margin: 0 30px 20px 20px;
        box-sizing: border-box;
        background-color: #fff;
      }

      .content_right {
        width: 30%;
        padding: 10px 20px 10px 20px;
        background-color: #fff;
      }
    }
  }
}

//搜索框搜索按钮 start
::v-deep .typeValueInput .el-input__wrapper {
  box-shadow: none;
  padding-right: 0 !important;
}

.typeValueInput ::v-deep .el-input__wrapper {
  padding-top: 0;
  padding-bottom: 0;
}

.typeValueInput ::v-deep .el-input__suffix {
  border-left: 1px solid #d9d9d9;
  padding: 1px;
}

::v-deep .el-input__suffix-inner {
  padding-right: 11px;
  background: #f9f9f9;
}

::v-deep .typeValueInput .el-input__wrapper {
  border-radius: 0 4px 4px 0 !important;
  border: 1px solid #d9d9d9;
  box-shadow: none !important;
}

::v-deep .typeValueInput .el-input__inner {
  width: 200px;
}

//end
//面包屑斜杆
::v-deep .el-breadcrumb__separator {
  font-size: 12px !important;
  color: #c9cdd4 !important;
  margin-top: 2px !important;
}

//面包屑中的文字颜色
::v-deep .el-breadcrumb__inner {
  color: #666 !important;
}

::v-deep .el-breadcrumb__inner.is-link,
.el-breadcrumb__inner a {
  font-weight: normal !important;
}

::v-deep .el-menu-item.is-active {
  border-bottom: 0 !important;
  background: #3d5ce41a !important;
  color: #3d5ce4;
}

.el-menu-demo {
  padding: 5px;
}

::v-deep .el-menu--horizontal {
  height: 50px !important;
}

:deep(.el-input__inner::placeholder) {
  color: #cccccc;
  font-size: 13px;
  font-weight: 400;
}

::v-deep .el-checkbox {
  margin: 0 !important;
}

.fileName {
  cursor: pointer;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 设置最大显示行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

//.tooltip {
//  position: relative;
//}
//.tooltip::after {
//  content: attr(title);
//  position: absolute;
//  top: 100%;
//  left: 50%;
//  transform: translateX(-50%);
//  white-space: nowrap;
//  background-color: #000;
//  color: #fff;
//  padding: 4px 8px;
//  border-radius: 4px;
//  opacity: 0;
//  visibility: hidden;
//  transition: opacity 0.2s ease, visibility 0.2s ease;
//}
//.tooltip:hover::after {
//  opacity: 1;
//  visibility: visible;
//}
.labelName {
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

::v-deep disabled,
::v-deep .disabled *,
::v-deep [disabled],
::v-deep [disabled] * {
  outline: 10px !important;
  cursor: pointer !important;
}

.tagsBox {
  width: 250px;

  .el-input {
    margin-bottom: 20px;
  }
}

.dataBox {
  width: 100%;
  text-align: center;
  position: relative;

  .el-image {
    width: 90%;
    height: 200px;
  }
}

.outSetBox {
  position: absolute;
  top: 1px;
  right: 1px;
  //width: calc(100% - 2px);
  width: 125px;
  height: calc(100% - 1px);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(61, 90, 228, 0);
}

.setBox {
  width: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 1));
  text-align: center;
  display: flex;
  justify-content: flex-end;
  height: inherit;
  align-items: center;
  border-radius: 4px;

  .el-icon {
    margin-right: 10px;
    font-size: 18px;
    cursor: pointer;

    &:hover {
      color: #3D5CE4;
    }

    &:last-child {
      &:hover {
        color: #FF5656;
      }
    }
  }
}

.labelDataBox {
  cursor: pointer;
  transition: border 0.3s ease-in;

  &:hover {
    border: 1px solid #a2b3ff;
    box-shadow: 0 0 3px 1px #e4e9ff inset, 0 0 5px 1px #d6ddff;
  }
}

.listDataBox {
  margin-left: 10px;
}

.tagsInitial {
  cursor: pointer;
}

.notChoose {
  color: #cccccc;
  cursor: initial;
}

.addTagWrap {
  width: 250px;
  height: 24px;
  border: 1px solid #ccc;

  .inputDeep {
    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
      cursor: default;

      .el-input__inner {
        cursor: default !important;
        width: 150px;
        height: 19px;
        margin-right: 10px;
        position: relative;
        top: 0;
        border-right: 1px solid #ccc;
      }
    }
  }
}

.addTagsBox {
  width: 280px;
  padding: 10px;
  border: 1px solid #f5f5f5;
  background: white;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  position: absolute;
  z-index: 2;
  margin-top: -5px;
}

.hoverStyle {
  &:hover {
    color: #3D5CE4;
  }
}

.popupBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.colorSmallBox {
  display: inline-block;
  height: 10px;
  width: 10px;
  margin-right: 2px;
  border-radius: 2px;
}
</style>
